<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .dizuo {
        width: 1000px;
        height: 200px;
        background-color: lightblue;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: row;
    }

    .box1 {
        width: 100px;
        height: 100px;
        background-color: white;
        border: 1px solid;
        margin: 10px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 10px;
    }

    .box2 {
        width: 100px;
        height: 100px;
        background-color: white;
        border: 1px solid;
        margin: 10px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 10px;
    }

    .box3 {
        width: 100px;
        height: 100px;
        background-color: white;
        border: 1px solid;
        margin: 10px;
        display: flex;
        border-radius: 10px;
    }

    .box4 {
        width: 100px;
        height: 100px;
        background-color: white;
        border: 1px solid;
        margin: 10px;
        display: flex;
        border-radius: 10px;
        justify-content: space-between;
    }

    .box5 {
        width: 100px;
        height: 100px;
        background-color: white;
        border: 1px solid;
        margin: 10px;
        display: flex;
        border-radius: 10px;
    }

    .box6 {
        width: 100px;
        height: 100px;
        background-color: white;
        border: 1px solid;
        margin: 10px;
        display: flex;
        border-radius: 10px;
    }

    sapn {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background-color: black;
    }

    .d21 {
        margin: 10px;
    }

    .d22 {
        margin: 10px;
    }

    .d31 {
        justify-self: flex-start;
        align-self: flex-start;
        margin: 10px;
    }

    .d32 {
        justify-self: center;
        align-self: center;
    }

    .d33 {
        justify-self: flex-end;
        align-self: flex-end;
        margin: 10px;
    }

    .box41 {
        background-color: white;
        display: flex;
        border-radius: 10px;
        flex-direction: column;
        justify-content: space-between;
        margin: 10px;
    }

    .box42 {
        background-color: white;
        display: flex;
        border-radius: 10px;
        flex-direction: column;
        justify-content: space-between;
        margin: 10px;
    }

    .box5 {
        display: flex;
    }

    .box5 .box51 {
        display: flex;
        justify-content: space-between;
        flex-direction: column;
        margin: 10px;
    }

    .box5 .box52 {
        display: flex;
        justify-content: space-between;
        flex-direction: column;
        justify-content: center;
    }

    .box5 .box53 {
        display: flex;
        justify-content: space-between;
        flex-direction: column;
        margin: 10px;
    }
    .box6{
        display: flex;
    }
    .box6 .box61{
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        margin: 7px;
    }
    .box6 .box62{
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        margin: 7px;
    }
    .box6 .box63{
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        margin: 7px;
    }
</style>

<body>
    <div class="dizuo">
        <div class="box1">
            <sapn></sapn>
        </div>
        <div class="box2">
            <sapn class="d21"></sapn>
            <sapn class="d22"></sapn>
        </div>
        <div class="box3">
            <sapn class="d31"></sapn>
            <sapn class="d32"></sapn>
            <sapn class="d33"></sapn>
        </div>
        <div class="box4">
            <div class="box41">
                <sapn class="d41"></sapn>
                <sapn class="d42"></sapn>
            </div>
            <div class="box42">
                <sapn class="d43"></sapn>
                <sapn class="d44"></sapn>
            </div>
        </div>
        <div class="box5">
            <div class="box51">
                <sapn class="d51"></sapn>
                <sapn class="d52"></sapn>
            </div>
            <div class="box52">
                <sapn class="d53"></sapn>
            </div>
            <div class="box53">
                <sapn class="d54"></sapn>
                <sapn class="d55"></sapn>
            </div>
        </div>
        <div class="box6">
            <div class="box61">
                <sapn class="d61"></sapn>
                <sapn class="d62"></sapn>
            </div>
            <div class="box62">
                <sapn class="d63"></sapn>
                <sapn class="d64"></sapn>
            </div>
            <div class="box63">
                <sapn class="d65"></sapn>
                <sapn class="d66"></sapn>
            </div>
        </div>
    </div>
</body>

</html>